JavaScript 鼠标悬停图片，显示隐藏文本 |
您所在的位置：网站首页 › js 显示隐藏 › JavaScript 鼠标悬停图片，显示隐藏文本 |
|
Unsplash 当我们在浏览网页的时候，描述性的文本通常不会跟在图片之后，而是当我们将鼠标移至图片上时，才会将文本显示出来，这样的好处是，以突显图片为主，并节省布局空间 HTML 结构如下 世界上最好的 Nian糕 世界上最好的 Nian糕 世界上最好的 Nian糕 CSS 样式如下 *{margin:0px;padding:0px;} #content{width:800px;height:180px;margin:200px auto 0px;border-bottom:1px solid #990033;} #content ul{list-style:none;width:750px;height:180px;margin:auto;} #content ul li{width:250px;height:180px;float:left;position:relative;overflow:hidden;} #content ul li div.tit{width:250px;height:50px;position:absolute;left:0px;bottom:-50px;background:rgba(0,0,0,0.5);} #content ul li div.tit p{color:#fff;text-align:center;margin:3px;font-family:"微软雅黑";} #footer{width:800px;height:160px;} #footer div.tel{width:100%;height:30px;color:#993300;font-size:12px;margin-left:40px;margin-top:10px;margin-bottom:20px;} #footer div.tel p a{width:50px;height:32px;display:inline-block;vertical-align:middle;} #footer div.detail{width:100%;height:50px;margin-left:40px;color:#993300;font-size:12px;} #footer div.detail p{margin-top:5px;} #footer div.detail p.curr{font-weight:bold;} #footer div.footer-nav{width:280px;float:right;color:#993300;font-size:12px;} #footer div.footer-nav ul li{list-style:none;float:left;margin-top:10px;}引入 jQuery 库，通过 $(this) 获取到鼠标所悬停的 li 元素， 第一个 function 实现了鼠标悬停在上面的效果，第二个 function 实现了鼠标离开之后的效果，并调用 .animate() 方法过渡平滑 $("#content ul li").hover(function(){//鼠标悬停在上面实现什么效果 $(this).find("div").stop().animate({ "bottom":"0px" },1000); },function(){//鼠标离开实现什么功能 $(this).find("div").stop().animate({ "bottom":"-50px" },1000); });运行结果 本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect End of File |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |